<template>
  <div class="layers-controls-card" v-if="show">
    <div class="header"><span>图层管理</span><a @click="handleClose"><CloseCircleOutlined class="bnClose" /></a></div>
    <div class="body">
      <a-tree checkable :tree-data="treeData" v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys" v-model:checkedKeys="checkedKeys">
        
      </a-tree>
    </div>
  </div>
</template>

<script>
//参考：Cesium深入浅出之图层管理器
// https://blog.csdn.net/fywindmoon/article/details/113747843
import { DownOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, watch } from 'vue';
import * as Cesium from '@cesium/Source/Cesium.js';
import LayerControlViewModel from './LayerControlViewModel.js';

const treeData = [
  {
    title: '图元',
    key: 'primitive',
    children: []
  },
  {
    title: '实体',
    key: 'entity',
    children: []
  },
  {
    title: '影像',
    key: 'imagery',
    children: []
  },
  {
    title: '地形',
    key: 'terrain',
    children: [
      // {
      //   title: 'parent 1-1',
      //   key: '0-0-1',
      // }
    ]
  }
];

export default defineComponent({
  components: {CloseCircleOutlined},
  setup() {
    return {};
  },
  props: {
    viewer: {
      type: Object,
      default: () => {}
    },
    layers: {
      type: Array,
      default: () => ["primitive","entity","imagery","terrain"]
    }
  },
  data() {
    return {
      show: true,
      viewModel: null,
      treeData,
      expandedKeys: [],
      selectedKeys: []
      // checkedKeys: []
    };
  },
  computed: {
    checkedKeys() {
      const checkedKeys = [];
      this.treeData.forEach(e => {
        e.children.forEach(ch => {
          if (ch.lyr.show) {
            checkedKeys.push(ch.key);
          }
        });
      });
      return checkedKeys;
    }
  },
  watch: {
    viewer: {
      handler(val) {
        this.onViewerInited();
      },
      immediate: true,
    },
    layers: {
      handler(lyrs) {
        lyrs = lyrs||[];
        this.treeData = treeData.filter(e=>lyrs.includes(e.key))
      },
      immediate: true,
    }
  },
  mounted() {
    this.onViewerInited();
  },
  beforeUnmount() {
    // this.viewModel && this.viewModel.destroy();
  },
  methods: {
    handleClose(){
      this.show=false;
    },
    updateLayers(t, target) {
      console.log(t, target);
      const data = this.treeData.filter(e => e.key === t)[0];
      if(!data){return}
      const children = [];
      if (t === 'imagery') {
        target.forEach((lyr, i) => {
          children.push({
            title: lyr.name,
            key: `imagery-${i}`,
            lyr
          });
        });
      } else if (t === 'terrain') {
        target.forEach((lyr, i) => {
          children.push({
            title: lyr.name,
            key: `terrain-${i}`,
            lyr
          });
        });
      } else if (t === 'entity') {
        target.forEach((lyr, i) => {
          children.push({
            title: lyr.name,
            key: `entity-${i}`,
            lyr
          });
        });
      } else if (t === 'primitive') {
        target.forEach((lyr, i) => {
          children.push({
            title: lyr.name,
            key: `primitive-${i}`,
            lyr
          });
        });
      }
      data.children = children;
      this.treeData = [...this.treeData];
    },
    onViewerInited() {
      let vm = this;
      const { viewer, viewModel } = this;
      if (!viewer) return;
      if (viewModel) return;
      this.viewModel = new LayerControlViewModel(viewer, ({ msg, target }) => {
        vm.updateLayers(msg, target);
      });
    }
  }
});
</script>

<style scoped lang="less">
.layers-controls-card {
  position: absolute;
  top: 85px;
  left: 7px;
  width: 240px;
  line-height: 16px;
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  z-index: 99;

  .header {
    padding: 5px 12px;
    line-height: 1.5em;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.4);

    display: flex;
    justify-content: space-between;
    align-items: center;

    .bnClose{
    }
  }
  .body {
    width: 100%;
    min-height: 5em;
    padding: 8px 16px 12px 6px;
    overflow: hidden;

    :deep(.ant-tree) {
      overflow: hidden;
      li {
        .ant-tree-node-content-wrapper {
          &:hover {
            background-color: rgba(0, 200, 255, 0.2);
          }
        }
        &.ant-tree-treenode-disabled .ant-tree-node-content-wrapper {
          &:hover {
            background-color: transparent;
          }
        }
        .ant-tree-node-content-wrapper .ant-tree-title {
          color: white;
        }
        &.ant-tree-treenode-disabled .ant-tree-node-content-wrapper .ant-tree-title {
          color: gray;
        }
      }
    }
  }
}
</style>
